<template>
    <div>
        <div>
            <h2>今日销售订单:</h2> <a>订单查询:</a>
            <el-select v-model="page.orderBy" clearable placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

            <el-button type="info" round @click="cxdd()">&nbsp;查&nbsp;询&nbsp;</el-button>
        </div>
        <div class="jz">
            <table >
                <tr>

                    <td>订单ID</td>
                    <td>会员号</td>
                    <td>商品</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>总价</td>
                    <td>销售日期</td>
                    <td>销售员</td>
                    <td>分店id</td>
                </tr>
                <tr v-for="(c,index) in cx" :key="c" :class="{on:index%2==0,off:index%2!=0}">

                    <td>{{c.orderid}}</td>
                    <td>{{c.membernumber}}</td>
                    <td>{{c.name}}</td>
                    <td>{{c.unitprice}}</td>
                    <td>{{c.number}}</td>
                    <td>{{c.pricetotal}}</td>
                    <td>{{c.endtime}}</td>
                    <td>{{c.salesclerkid}}</td>
                    <td>{{c.storeid}}</td>

                </tr>
                <tr>
                    <td colspan="7">
                        <el-pagination
                                @current-change="toPage"
                                background="true"
                                :total="pageCount"
                                :page-size="page.pageSize"
                                :current-page="page.pageNo"
                                layout="prev, pager, next"
                        >
                        </el-pagination>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "cx",
        data() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return {
                options: [{
                    value: '1',
                    label: '单笔总价'
                }, {
                    value: '2',
                    label: '订单号'
                }],
                cx: {
                    orderid: '',
                    membernumber: '',
                    name: '',
                    unitprice: '',
                    number: '',
                    pricetotal: '',
                    endtime: '',
                    salesclerkid:'',
                    storeid:''
                },
                fullscreenLoading: false,
                currentPageCount: 1,
                currentPageNo: 1,
                pageCount: "",
                page: {
                    pageNo: 1,
                    pageSize: 4,
                    orderBy: "",
                    endtime:currentdate,
                    salesclerkid:"",
                   // salesclerkid:""
                },
                countdd:"",
            }
        },
        beforeRouteEnter(to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当钩子执行前，组件实例还没被创建
            // alert("home被显示");
            next(vm => {
                //在此处vm表示vue组件对象
                vm.loadData();
            });
        },
        methods: {
            loadData: function () {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                }, 2000);

                var vm = this;
                this.axios.post("/getname")
                    .then(function (response) {
                        vm.cx.salesclerkid = response.data.id;
                        vm.page.salesclerkid= response.data.id;
//                        vm.UserSelect.id = response.data.id;
//                        vm.UserName = response.data.realname;
//                        vm.StoreId = response.data.storeid;
//                        vm.selectPrice.storeid = response.data.storeid;
                    }).catch((error) => {
                })

                this.$options.methods.cxdd.bind(this)();
//                this.axios.post('/selectCountByshy', this.cx)
////                    alert("售货员id"+this.cx.salesclerkid)
//                    .then((response) => {
//                        this.cx = response.data.data;
//                    })
//                    .catch((error) => {
//                        alert(error);
//                    });

//                this.axios.post("/selectCountByshy",this.salesclerkid)
//                    .then((response) => {
//                    })
//                    .catch((error) => {
//                        alert(error);
//                    });
            },
            cxdd: function () {
                this.axios.post('/selectAllOrders', this.page)
                    .then((response) => {
                        this.cx = response.data.data;
                        this.pageCount = response.data.pageCount;
                        this.currentPageNo = response.data.pageNo ;
                    })
                    .catch((error) => {
                        alert(error);
                    });
            },
            toPage: function (num) {

                this.page.pageNo = num;
                this.loadData();
            },


        }

    }
</script>

<style scoped>
    .on {
        background: lavender;
        /*border: 1px solid ;*/
    }

    .off {
        background: grey;
        /*border: 1px solid ;*/

    }

    .jz {
        margin: 0px 0px 0px 360px;
    }

</style>
